<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="u-tabsSwiper">
				<u-tabs active-color="#333333" inactive-color="#696969" :bar-style="barStyle" font-size="28"
					:list="tabSwiper" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="flex-col list">
				<view v-if="displayOrderList.length" >
					<view class="list-item flex-col" :key="index" v-for="(item,index) in displayOrderList"
						:class="item.status === 2 ? 'section' : ''">
						<view class="flex-row">
							<view :class="['left-section flex-col items-center', 'status_' + item.status]">
								<image :src="item.room.room_bannerimage" class="image_1" />
								<text class="text_6">{{ display_status(item.status) }}</text>
							</view>
							<view class="right-group flex-col">
								<text class="text_8">{{ strSub(item.store.store_name, 16) }}</text>
								<text class="text_10">{{ strSub(item.room.room_name, 18) }}</text>
								<text class="text_12">预约时间：{{ item.formatDate }} {{item.formatstart}} -{{item.formatend}}</text>
								<text class="text_14">下单时间：{{ item.formatOrderTime }}</text>
								<view class="group_2 flex-row" @click="copy(item)">
									<text class="text_16">订单编号：{{ item.paytransaction.out_trade_no | substring(13)}}</text>
									<view class="right-text-wrapper flex-col items-center"><text>复制</text></view>
								</view>
								<text class="text_19">总计 {{ item.fee }} 元</text>
							</view>
						</view>
					
						<!-- <view class="text_19 justify-end view_8" v-if="item.status === 2">
							<text class="text_28">总计 {{ item.price }}元</text>
							<view class="flex-col text-wrapper">
								<button class="button" hover-class="hoverClass" @click="payMent">支付</button>
							</view>
						</view>
						<text class="text_19" v-else>总计 {{ item.fee }}元</text> -->
					</view>
				</view>
				
				<view v-else class="no_record_center">
					<no-record></no-record>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barStyle: {
					display: 'none'
				},
				orderList: [],
				displayOrderList: [],
				tabSwiper: [{
						status: 0,
						name: '全部订单'
					},
					{
						status: 1,
						name: '支付成功'
					},
					{
						status: 2,
						name: '已完成'
					},
					{
						status: 3,
						name: '已取消'
					},
				],
				current: 0 // tabs组件的current值，表示当前活动的tab选项
			}
		},
		onLoad() {
			this.$u.api.getDirectPayOrder()
				.then((res) => {
					if (1 == res.code) {
						this.orderList = res.data
						this.displayOrderList = res.data
					}
				})
		},
		methods: {
			display_status(status) {
				if (3 == status) {
					return '支付成功'
				} else if (4 == status) {
					return '已完成'
				} else if (5 == status) {
					return '已经取消'
				}
			},
			change(index) {
				switch (index) {
					case 0:
						this.current = index;
						this.displayOrderList = this.orderList;
						break;
					case 1:
						this.current = index;
						this.displayOrderList = this.orderList.filter(item => item.status === 3);
						break;
					case 2:
						this.current = index;
						this.displayOrderList = this.orderList.filter(item => item.status === 4);
						break;
					case 3:
						this.current = index;
						this.displayOrderList = this.orderList.filter(item => item.status === 5);
						break;
					case 4:
						this.current = index;
						this.displayOrderList = this.orderList.filter(item => item.status === 3);
						break;
				}
			},
			//复制
			copy(item) {
				//提示模板
				uni.setClipboardData({
					data: item.paytransaction.out_trade_no, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							//提示
							title: '复制成功'
						});
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(243, 243, 243);
		width: 100%;
		overflow-y: auto;
		height: 100vh;

		.group {
			flex: 1;
			overflow: hidden;

			.u-tabsSwiper {
				height: 80rpx;
			}

			.list {
				flex: 1;
				overflow-y: auto;
				margin-top: 16rpx;
				padding: 24rpx 22rpx 80rpx 24rpx;
				background-color: #ffffff;

				.list-item {
					padding: 30rpx 18rpx 30rpx 22rpx;
					background-color: rgb(255, 255, 255);
					box-shadow: 0px 4px 8px 0px #EEEBEC;
					border-radius: 16rpx;
					border: 2px solid #ECECEC;

					&:not(:first-of-type) {
						margin-top: 30rpx;
					}

					.text_19 {
						margin-top: 34rpx;
						align-self: left;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						white-space: nowrap;

						.text_28 {
							margin: 10rpx 176rpx 10rpx 0;
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text-wrapper {
							.button {
								margin: 0;
								height: 60rpx;
								line-height: 60rpx;
								color: rgb(255, 255, 255);
								font-size: 28rpx;
								font-weight: 600;
								background-color: rgb(216, 88, 134);
							}

							.hoverClass {
								background-color: #bb2058;
								color: #ffffff;
								border: none;
							}
						}
					}

					.view_8 {
						margin-top: 26rpx;
						align-self: initial;
						color: initial;
						font-size: initial;
						font-weight: initial;
						line-height: initial;
						white-space: initial;
						padding: 0 4rpx;
					}

					.left-section {
						overflow: hidden;
						margin-bottom: 8rpx;
						padding-bottom: 12rpx;
						color: rgb(213, 213, 213);
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						white-space: nowrap;
						border-radius: 16rpx;
						height: 240rpx;
						border: solid 4rpx rgb(213, 213, 213);
						width: 174rpx;

						.image_1 {
							// border-radius: 16rpx 16rpx 0px 0px;
							width: 100%;
							height: 174rpx;
						}

						.text_6 {
							margin-top: 10rpx;
						}
					}

					.right-group {
						margin-left: 32rpx;
						margin-right: 4rpx;
						flex: 1 1 auto;

						.text_8 {
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_10 {
							margin-top: 12rpx;
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							font-weight: 200;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_12 {
							margin-top: 16rpx;
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 200;
							line-height: 34rpx;
							white-space: nowrap;
						}

						.text_14 {
							margin-top: 18rpx;
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 200;
							line-height: 34rpx;
							white-space: nowrap;
						}

						.group_2 {
							margin-top: 14rpx;
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 200;
							line-height: 34rpx;
							white-space: nowrap;

							.text_16 {
								margin-top: 4rpx;
							}

							.right-text-wrapper {
								margin-left: 32rpx;
								padding: 4rpx 0 2rpx;
								background-color: rgb(216, 216, 216);
								width: 68rpx;
								height: 40rpx;
							}
						}
					}

					.status_3 {
						color: rgb(23, 190, 187);
						border: solid 4rpx rgb(23, 190, 187);
						background-color: rgb(228, 250, 249);
					}

					.status_2 {
						margin-bottom: 6rpx;
						color: rgb(244, 178, 54);
						border: solid 4rpx rgb(244, 178, 54);
						background-color: rgb(253, 241, 219);
					}

					.status_4 {
						color: rgb(23, 190, 187);
						border: solid 4rpx rgb(23, 190, 187);
						background-color: rgb(228, 250, 249);
					}
					
					.status_5 {
						color: rgb(251, 255, 255);
						border: solid 4rpx rgb(239, 171, 167);
						background-color: rgb(248, 143, 137);
					}
				}

				.section {
					padding: 30rpx 18rpx 22rpx 22rpx;
				}
			}
		}
	}
</style>
